<template>
  <div class="root">
    <el-descriptions
      title="产品详情"
      direction="vertical"
      :column="6"
      border
      style="margin-top: 20px"
    >
      <el-descriptions-item
        :rowspan="2"
        :width="140"
        label="视频图片"
        align="center"
      >
        <el-image
          style="width: 100px; height: 100px"
        <img :src="host + item.picurl"  v-if="data.picurl" />
        <img src="../../../static/images/4K (10).jpg" v-else />
      </el-descriptions-item>
      <el-descriptions-item label="商品名">{{
        data.name
      }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ data.price }}</el-descriptions-item>
      <el-descriptions-item label="产品编码">{{
        data.code
      }}</el-descriptions-item>
      <el-descriptions-item label="产品型号">{{
        data.spec
      }}</el-descriptions-item>
      <el-descriptions-item label="产品图号">
        {{ data.productNumber }}
      </el-descriptions-item>
      <template #extra>
      <el-button type="primary" @click="jumpTo">产品询价</el-button>
      <el-button type="primary" @click="returnTo">返回产品页面</el-button>
    </template>
    </el-descriptions>

    

    <el-descriptions
      title="品牌资料"
      direction="vertical"
      :column="1"
      border
      style="margin-top: 20px"
    >
      <el-descriptions-item>
        <!-- 富文本 -->
        <RichText ref="brandRef"></RichText>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="产品详情"
      direction="vertical"
      :column="1"
      border
      style="margin-top: 20px"
    >
      <!-- 富文本 -->
      <el-descriptions-item>
        <!-- 富文本 -->
        <RichText ref="detailRef"></RichText>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
import RichText from "@/components/RichText.vue";
import { useRoute ,useRouter} from "vue-router";
import { queryProductDetail } from "@/api/product.js";
// 服务器根路径
import host from "@/utils/env.js";

//路由实例 跳转产品询价界面
const router = useRouter();
//路由信息
const route = useRoute();

//保存id 方便其他使用
const productId = ref(0);

//响应对象 保存产品信息
const data = ref({
  picurl: "",
  name: "zhangsan",
  price: "",
  code: "",
  spec: "",
  productNumber: "",
  brandDetail: "",
  detail: ""
});
//富文本框同名引用
const brandRef = ref(null);
const detailRef = ref(null);

async function init(id) {
    //模拟查询当前id的详细信息
   console.log("根据id=" + id);

   //将查询的后台数据赋值给响应式对象data
  let res = await queryProductDetail(id);
  console.log("res>>>>", res);
  if (res.code == 200) {
    data.value = res.data
  }

  //获取品牌资料的内容
   brandRef.value.valueHtml =  res.data.brandDetail;
  //获取详情
   detailRef.value.valueHtml = res.data.detail; 

 
}
//产品询价按钮 跳转产品询价界面
function jumpTo() {
  router.push({path:"/enquiry/add"})
}
// 返回产品页面
function returnTo() {
  router.push({path:"/product/list"})
}


onBeforeMount(() => {
  productId.value = route.query.id;
  init(route.query.id);
});
</script>
<style scoped>
.title {
  margin-bottom: 20px;
}

.product-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.product-img img {
  width: 90%;
  max-width: 700px;
  height: auto;
}

.product-description {
  text-align: right;
}

.brand-title,
.description-title {
  margin-top: 20px;
  margin-bottom: 10px;
}


</style>
